<template>
  <t-popup
    class="popup_boxs_out"
    v-model="is_prop"
    :placement="'bottom'"
    destroy-on-close
    @closed="hidetabs"
  >
    <div class="popup_boxs_out_box">
      <div>
        <span class="out_yean_title">年份</span>
        <div class="popup_boxs_out_time">
          <!-- out_time_item2 -->
          <div
            class="out_time_item"
            v-for="(item, index) in tearArr"
            :key="index"
            :class="year == item ? 'out_time_item2' : ''"
            @click="yeartabs(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div style="padding-bottom: 20px">
        <span class="out_yean_title">学期</span>
        <div class="popup_boxs_out_time">
          <div
            class="out_time_item"
            :class="index == seletime ? 'out_time_item2' : ''"
            v-for="(item, index) in semesterData"
            :key="index"
            @click="seletimetab(index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div style="display: flex" class="buttons">
        <el-button
          type="success"
          size="large"
          color="rgba(73, 185, 173, 1)"
          plain
          style="width: 100%"
          @click="is_prop=false"
          >取消</el-button
        >
        <el-button
          type="success"
          size="large"
          color="rgba(73, 185, 173, 1)"
          @click="oktabs"
          :disabled="year == seobj.year && seobj.seletime == seletime"
          style="color: #fff; width: 100%"
          >确定</el-button
        >
      </div>
    </div>
  </t-popup>
</template>
<script>
import dayjs from "dayjs";

export default {
  data() {
    return {
      year: null,
      seletime: 0,
      seobj:{
        year: null,
        seletime: 0,
      },
      is_prop: false,
      tearArr: [],
      timesArr:[],//返回数据
      daytime: dayjs().format("YYYY-MM-DD"),//当前时间
      semesterData: [
        {
          label: "上学期",
          start: "01-15",
          end: "07-15",
        },
        {
          label: "下学期",
          start: "07-16",
          end: "01-14",
        },
      ],
    };
  },
  mounted() {
    this.timeArr();
  },
  methods: {
    hidetabs(){
        this.is_prop=false;
        this.year=this.seobj.year;
        this.seletime = this.seobj.seletime;
    },
    yeartabs(i) {
      this.year = i;
    },
    seletimetab(index){
        this.seletime = index;
    },
    oktabs(){
        let timesArr=[`${this.year}-${this.semesterData[this.seletime].start}`, `${this.seletime==1? this.year+1:this.year}-${this.semesterData[this.seletime].end}`]
        this.timesArr = timesArr;
        this.is_prop=false;
        this.seobj.year = this.year;
        this.seobj.seletime = this.seletime;
        this.$emit('oktabs','测试')
    },
    timeArr() { 
      let tearArr = [];
      for (let i = 0; i < 8; i++) {
        tearArr.push(dayjs().year() - i);
      }
      this.tearArr = tearArr; 
    },
    calculate(){
        // 时间计算 
        let vm=this
        this.semesterData.forEach((item,index)=>{
            let start = dayjs(`${ dayjs().year()}-${item.start}`).format('YYYY-MM-DD') //开始时间
            let end = dayjs(`${index==1?dayjs().year()+1:dayjs().year()}-${item.end}`).format('YYYY-MM-DD')//结束时间
            // let daytime = dayjs('20250716').format('YYYY-MM-DD') //当前时间 daytime
            let daytime = dayjs(this.daytime).format('YYYY-MM-DD') //当前时间 
            if((dayjs(daytime).isSame(dayjs(start))||dayjs(daytime).isAfter(dayjs(start)))&&(dayjs(daytime).isSame(dayjs(start))||dayjs(  daytime).isBefore(dayjs(end)))){
             
                vm.seletime = index;
                vm.year =dayjs().year();
                vm.timesArr=[start,end];
                vm.seobj.seletime = index;
                vm.seobj.year =dayjs().year();
            } 

        })
    }
  },
};
</script>
<style  >
.popup_boxs_out {
  width: 100%;
}
.popup_boxs_out_time {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.out_time_item {
  height: 31px;
  border: 1px solid rgba(246, 246, 246, 1);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  align-items: center;
}
.out_time_item2 {
  background-color: rgba(73, 185, 173, 0.3);
  border: 1px solid rgba(73, 185, 173, 0.3);
  color: rgba(73, 185, 173, 1);
}
.out_yean_title {
  font-size: 14px;
  color: rgba(3, 3, 2, 0.3);
}
.popup_boxs_out_box {
  padding:  15px;
  padding-top: 20px;
  
  box-sizing: border-box;
}
 
</style>